<template>
    <div id="memberList">
        <!--搜索框-->
        <div class="interview-header">
            <el-form :inline="true" :model="searchItem"  ref="searchItem" class="demo-form-inline">
                <el-form-item label="订单编号" class="search-item" prop="loanNo">
                    <el-input v-model="searchItem.loanNo" placeholder="订单编号"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号" class="search-item" prop="phone">
                    <el-input v-model="searchItem.phone" placeholder="用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="借款人" class="search-item" prop="realName">
                    <el-input v-model="searchItem.realName" placeholder="借款人"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="fa-search" @click="loadData">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="fa-repeat" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--列表-->
        <div class="table-box">
            <div class="export-btn">
                <el-button type="primary" @click="export2Excel">导出</el-button>
            </div>
            <el-table border :data="tableData" @selection-change="handleSelectionChange">
                <el-table-column label="选择" type="selection" align="center" width="55"></el-table-column>
                <el-table-column align="center" label="序号" type="index"></el-table-column>
                <el-table-column align="center" label="订单编号" prop="loanNo" width="180"></el-table-column>
                <el-table-column align="center" label="借款人" prop="realName" width="110"></el-table-column>
                <el-table-column align="center" label="手机号" prop="phone" width="140"></el-table-column>
                <el-table-column align="center" label="身份证号" prop="idcard" width="180"></el-table-column>
                <el-table-column align="center" label="注册时间" prop="createTime" width="190"></el-table-column>
                <el-table-column align="center" label="累计借款总额" width="120" prop="repayAmount"></el-table-column>
                <el-table-column align="center" label="本金总额" prop="loanAmount"></el-table-column>
                <el-table-column align="center" label="利息总额" prop="repayInterest"></el-table-column>
                <el-table-column align="center" label="已还总额" prop="repayedAmount"></el-table-column>
                <el-table-column align="center" label="已还/期数" prop="repayedAmount/repayCount"></el-table-column>
                <el-table-column align="center" label="剩余未还总额" width="120" prop="lessAmount"></el-table-column>
                <el-table-column align="center" label="逾期总额" prop="overdueAmount"></el-table-column>
                <el-table-column align="center" label="逾期期数" prop="overdueCount"></el-table-column>
                <el-table-column align="center" label="逾期本金" ></el-table-column>
                <el-table-column align="center" label="逾期利息"></el-table-column>
                <el-table-column align="center" label="催收费" prop="charging"></el-table-column>
                <el-table-column align="center" label="借款状态" ></el-table-column>
                <el-table-column align="center" label="业务来源" ></el-table-column>
                <el-table-column align="center" label="操作" fixed="right" width="180">
                    <template scope="scope">
                        <router-link :to="{path: '/memberDetail', query: { loanNo: scope.row.loanNo, userNo: scope.row.userNo}}"><el-button size="small" type="primary">查看详情</el-button></router-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="pageNum">
            <el-pagination
                @current-change ="handleCurrentChange"
                @size-change="handleSizeChange"
                :pageNum-sizes="pagesize"
                layout="prev, pager, next, total, sizes"
                :total="total">
            </el-pagination>
        </div>

        <!--暂停功能暂不支持-->
        <el-dialog title="抱歉" :visible.sync="sorryDialog" class="sorryDialog">
            <p>此功能暂不支持，敬请期待！</p>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sorryDialog = false">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import { listUserInfo } from "@/api/api";
    export default {
        name: "memberList",
        data () {
            return {
                total: 0,
                pagesize: ["10","30","50"],
                searchItem: {
                    loanNo: "",
                    phone: "",
                    realName: "",
                    pageNum: 1,
                    pageSize: 10
                },
                tableData: [],
                multipleSelection: [],
                pageNum: 1,
                sorryDialog: false
            };
        },
        mounted: function () {
            this.$nextTick(function () {
                this.loadData();
            });
        },
        watch: {
            $route (to) {
                if(to.name === "memberList"){
                    this.loadData();
                }
            }
        },
        methods: {
            // 会员列表、查询
            async loadData () {
                let _this = this;
                await listUserInfo(this.searchItem).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    if (Data) {
                        _this.tableData = Data.list;
                        _this.total = Data.total;
                        let arr = _this.tableData;
                        for (let i=0; i<arr.length; i++) {
                            let DateUnit = ["年", "月", "日"];
                            let signRepayType = ["到期还款", "先息后本", "等额本息", "等额本金"];

                            // 申请时间
                            if (arr[i].createTime) {
                                arr[i].createTime = this.formatTime(arr[i].createTime);
                            }

                           // 面签时间
                            if (arr[i].signTime) {
                                arr[i].signTime = this.formatTime(arr[i].signTime);
                            }

                            // 面签期限
                            arr[i].signLoanTime = arr[i].signLoanTime + DateUnit[arr[i].signLoanUnit];

                            // 还款方式
                            arr[i].signRepayType = signRepayType[arr[i].signRepayType];
                        };
                    }
                });
            },
            // 重置；
            resetForm () {
                this.$refs.searchItem.resetFields();
            },
            // 选中
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 导出
            export2Excel() {
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../vendor/Export2Excel');
                    const tHeader = ['订单编号', '借款人', '手机号', '身份证号', '注册时间', '累计借款总额', '本金总额', '利息总额', '已还总额', '已还/期数', '剩余未还总额', '逾期总额', '逾期期数', '逾期本金', '逾期利息', '催收费', '借款状态', '业务来源']; // 对应表格输出的title
                    const filterVal = ['loanNo', 'realName', 'phone', 'idcard', 'createTime', 'repayAmount', 'loanAmount', 'repayInterest', 'repayedAmount', 'repayedAmount/repayCount', 'lessAmount', 'overdueAmount', 'overdueCount', '', '', '', '', '']; // 对应表格输出的数据
                    const list = this.multipleSelection;
                    const data = this.formatJson(filterVal, list);
                    if (list.length > 0) {
                        export_json_to_excel(tHeader, data, '会员列表excel'); // 对应下载文件的名字
                    } else {
                        this.$message({
                            message: "请选择需要导出的数据",
                            type: 'error'
                        });
                    }
                });
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]));
            },
            // 当前页码
            handleCurrentChange(val){
                this.searchItem.pageNum = val;
                this.loadData();
            },
            // 每页条数;
            handleSizeChange(val){
                this.searchItem.pageSize = val;
                this.loadData();
            }
        }
    };
</script>

<style lang="scss">
    #memberList{
        .table-ul{
            width: 100%;
            height: 50px;
            line-height:50px;
            text-align: center;
            .table-li{
                width: 120px;
                height: 50px;
                line-height:50px;
                text-align: center;
                border: 1px solid #eee;
                border-left: none;
                border-top:none;
                cursor: pointer;
            }
        }
        .interview-header{
            border: 1px solid #eee;
            margin:20px;
            padding:22px 0 0 20px;
            min-width: 1200px;
            box-sizing: border-box;
            .search-in{
                .search-item{
                    margin-right: 30px;
                }
            }
        }
        .table-box{
            border: 1px solid #eee;
            margin:20px;
            min-width: 1200px;
            .add-btn{
                margin: 20px;
                .el-icon-plus{
                    font-size:12px;
                }
            }
            .export-btn{
                padding: 15px;
            }
        }
        .el-table .cell, .el-table th>div{
            padding:5px;
            white-space: nowrap;
        }
        .pageNum{
            text-align: right;
            padding:0 10px;
            .el-pagination{
                padding:0;
            }
        }
    }
</style>
